<template>
  <div class="panel">
    <panel-title title="商家筛选器列表"></panel-title>
    <div class="panel-body">
      <!--查询条件-->
      <el-form :inline="true" class="demo-form-inline">
        <!--<el-form-item label="规则 ID">
          <el-input v-model="searchRuleId" placeholder="请输入规则ID"></el-input>
        </el-form-item>-->
        <el-form-item label="规则名称">
          <el-input v-model="searchRuleName" placeholder="请输入规则名称"></el-input>
        </el-form-item>
        <el-form-item label="运行状态">
          <el-select v-model="searchStatus" placeholder="请选择状态">
                      <el-option
                        v-for="item in statusOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
        </el-form-item>
        <el-form-item label="预警对象">
          <el-input v-model="searchEmail" placeholder="请输入预警对象"></el-input>
        </el-form-item>
        <el-form-item label="创建人">
                  <el-input v-model="searchCreator" placeholder="请输入创建人"></el-input>
                </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
                      v-model="searchCreateTime"
                      type="datetimerange"
                      :picker-options="pickerOptions"
                      range-separator="至"
                      start-placeholder="创建开始日期"
                      end-placeholder="创建结束日期"
                      align="right">
                    </el-date-picker>
        </el-form-item>
      </el-form>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-button @click="cleanSearch"><i class="fa el-icon-close"></i>&nbsp;清空</el-button>
          <el-button type="primary" @click="getSizerPageData"><i class="fa fa-search"></i>&nbsp;查询</el-button>
        </el-col>
      </el-row>
      <!--查询结束-->
      <el-table
        :data="clients.data"
        border
        style="width: 100%"
        align="center"
      >
        <el-table-column
          prop="id"
          label="规则ID">
        </el-table-column>
        <el-table-column
          prop="description"
          label="规则名称"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
          prop="consJson"
          label="筛选条件"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
          prop="runStatus"
          label="状态">
          <template slot-scope="scope">
            {{getRunStatusById(scope.row.runStatus)}}
          </template>
        </el-table-column>

        <el-table-column
          prop="totalRunNum"
          label="总运行次数">
        </el-table-column>
        <el-table-column
          prop="runType"
          label="运行类型">
          <template slot-scope="scope">
            {{getRunTypeById(scope.row.runType)}}
          </template>
        </el-table-column>
        <el-table-column
          prop="alterSill"
          label="预警门槛"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
          prop="alterSendEmail"
          label="预警对象"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
          prop="userName"
          label="创建人"
          :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
          :formatter="dateFormat"
          prop="createTime"
          width="170"
          label="创建时间">
        </el-table-column>
        <el-table-column
          :formatter="dateFormat"
          prop="updateTime"
          width="170"
          label="更新时间">
        </el-table-column>
        <el-table-column
          width="260"
          label="操作">
          <template slot-scope="scope">
            <el-button @click="editSizer(scope.row.id)" type="text" size="small">编辑</el-button>
            <el-button type="text" size="small" @click="updateShow(scope.row.id,scope.$index)">
              {{showToggle(scope.$index)}}
            </el-button>
            <el-button type="text" size="small" @click="exportExcel(scope.row.id)">导出</el-button>
            <el-button type="text" size="small" @click="runJob(scope.row.id)">运行</el-button>
            <el-button type="text" size="small" @click="deleteRuleById(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="clients.currentPageNo"
          :page-sizes="[10, 50, 100, 200]"
          :page-size="clients.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="clients.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
  import {panelTitle} from 'components'
  import {userUtil} from 'common/tools'
  import moment from 'moment'
  export default {
    data() {
      return {
        clients: {
          total: 0,
          pageSize: 10,
          currentPageNo: 1,
          data: []
        },
        searchRuleId: null,
        searchRuleName: null,
        searchStatus: null,
        searchEmail: null,
        searchCreator: null,
        searchCreateTime: [],
        statusOptions: [{
          value: null,
          label: '请选择',
        }, {
          value: '0',
          label: '等待中'
        }, {
          value: '1',
          label: '运行中'
        }, {
          value: '2',
          label: '运行完成'
        }, {
          value: '-1',
          label: '运行出错'
        }],
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      }
    },
    components: {
      panelTitle
    },
    created() {
      this.getSizerPageData()
    },
    computed: {
      showToggle() {
        return function (index) {
        if (this.clients.data[index].isShow === 1) {
          return "展示"
        } else if (this.clients.data[index].isShow === 0){
          return "不展示"
        }
        }
      },
    },
    methods: {

      editSizer(id) {
        this.$router.push({
          name: "sellerSizerCreate",
          params: {
            id: id,
          }
        })
      },
      handleSizeChange(val) {
        this.clients.pageSize = val
        this.getSizerPageData()
      },
      handleCurrentChange(val) {
        this.clients.currentPageNo = val
        this.getSizerPageData()
      },
      getSizerPageData() {
        var loginInfo = userUtil.getLoginInfo();
        this.$fetch.apiSizer.sizerPageData({
          statRuleType: 1,
          pageNo: this.clients.currentPageNo,
          pageSize: this.clients.pageSize,
          id: this.searchRuleId,
          description: this.searchRuleName,
          runStatus: this.searchStatus,
          alterSendEmail: this.searchEmail,
          userName: this.searchCreator,
          userId: loginInfo.userId,
          startCreateTime: this.searchCreateTime[0]!=undefined?moment(this.searchCreateTime[0]).format("YYYY-MM-DD HH:mm:ss"):"",
          endCreateTime: this.searchCreateTime[1]!=undefined?moment(this.searchCreateTime[1]).format("YYYY-MM-DD HH:mm:ss"):"",
        }).then(({data: data}) => {
          console.log(data)
          this.clients = data
        })
      },
      cleanSearch() {
        this.searchRuleId = null
        this.searchRuleName = null
        this.searchStatus = null
        this.searchEmail = null
        this.searchCreator = null
        this.searchCreateTime = []
      },

      getRunTypeById(id) {
          if (id == 1) {
            return "单次运行"
          } else if (id == 2) {
            return "定时运行"
          }
        },

      getRunStatusById(id) {
        if (id == 0) {
          return "等待中"
        } else if (id == 1) {
          return "运行中"
        } else if (id == 2) {
          return "运行完成"
        } else if (id == -1) {
          return "运行错误"
        }
      },
      runJob(id){
        this.$confirm('是否运行该任务？', '确认信息', {
          distinguishCancelAndClose: true,
          confirmButtonText: '确认',
          cancelButtonText: '取消'
        }).then( () =>{
          this.$fetch.apiSizer.runSizer({
            id: id
          }).then(({data: data}) => {
            if (data.code == 1000) {
              //alert(this.clients.data[index].isShow)
              this.$message({
                type: 'info',
                message: '任务提交成功'
              });

            } else {
              this.$message({
                type: 'info',
                message: '任务提交失败'
              });
            }
            //刷新列表
            this.getSizerPageData();
          })
        })
      },
      //根据id返回搜索条件，调用导出接口
      exportExcel(id){
        this.$confirm('是否根据当前条件导出表格？', '导出', {
          distinguishCancelAndClose: true,
          confirmButtonText: '确认',
          cancelButtonText: '取消'
        }).then( () =>{
          this.$fetch.apiSizer.exportDataByCondition({
            id: id
          })
        })
      },

      updateShow(id, index) {
        this.$confirm('是否修改展示状态？', '确认信息', {
          distinguishCancelAndClose: true,
          confirmButtonText: '修改',
          cancelButtonText: '取消'
        }).then(() => {
            this.$fetch.apiSizer.updateSizer({
              //查询参数
              id: id,
              isShow: this.clients.data[index].isShow == 1 ? 0 : 1,
            }).then(({data: data}) => {
              if (data == 1) {
                //alert(this.clients.data[index].isShow)
                this.$message({
                  type: 'info',
                  message: '修改展示状态成功'
                });
                this.clients.data[index].isShow = this.clients.data[index].isShow == 1 ? 0 : 1
                //this.clients.data=this.clients.data
              } else {
                this.$message({
                  type: 'info',
                  message: '修改展示状态失败'
                });
              }
            })
          })
          .catch(action => {
            this.$message({
              type: 'info',
              message: action === 'cancel'
                ? '放弃删除'
                : '放弃删除'
            })
          });
      },
      dateFormat: function (row, column) {
        var date = row[column.property];
        if (date == undefined) {
          return "";
        }
        return moment(date).format("YYYY-MM-DD HH:mm:ss");
      },
      deleteRuleById(id) {
        this.$confirm('是否删除？', '确认信息', {
          distinguishCancelAndClose: true,
          confirmButtonText: '删除',
          cancelButtonText: '取消'
        })
          .then(() => {
            this.$fetch.apiSizer.updateSizer({
              //查询参数
              id: id,
              delFlag: 1,
            }).then(({data: data}) => {
              if (data == 1) {
                this.$message({
                  type: 'info',
                  message: '删除成功'
                });
                //跳到列表页
                this.getSizerPageData()
              } else {
                this.$message({
                  type: 'info',
                  message: '删除失败'
                });
              }
            })
          })
          .catch(action => {
            this.$message({
              type: 'info',
              message: action === 'cancel'
                ? '放弃删除'
                : '放弃删除'
            })
          });
      }
    }
  }
</script>
